<template>
  <div class="home-wrap">
    <div class="home-list">
      <h4 class="home-tj list-rank">我的喜欢</h4>
      <div class="home-List-box">
        <img src="../assets/lazy.jpg" v-if="showImg" alt="">
        <InfoList :info-list="likeUserInfo.data" ></InfoList>
        <!--                <InfoItem :info-list="likeUserInfo.data"></InfoItem>-->
        <el-pagination v-model:current-page="likeUserInfo.current"
                       @update:current-page="currentChange"
                       background layout="prev, pager, next"
                       style="position: absolute;right: 160px"
                       :page-count="likeUserInfo.pages"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import InfoItem from "@/components/InfoItem.vue";
import {ref} from "vue";
import InfoList from "../components/InfoList.vue"

export default {
  name: "LikeUserList",
  components: {InfoItem, InfoList},
  created() {
    this.$loading();
    this.getLikeUserInfo(1)

  },
  methods: {
    currentChange(e) {
      this.$loading();
      this.getLikeUserInfo(e)
      this.$loading().close();
    },
    getLikeUserInfo(current) {
      this.$loading();
      this.$requestCenter.getLikeUserInfo(current).then((e) => {
        this.likeUserInfo = e.data
        if (this.likeUserInfo == '' || this.likeUserInfo == null) {
          this.showImg = true
        }
      })
      this.$loading().close();
    }
  },
  setup() {
    return {
      likeUserInfo: ref(),
      showImg: ref(false)
    }
  }
}
</script>

<style lang="less" scoped>
@import "./src/assets/style/base.less";

.home-wrap {
  padding-top: 74px;
  width: 90%;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

.home-list {
  padding: 20px 0;
  margin: 20px 0;
}

.pages {
  float: right !important;
  padding: 10px 55px 0 0 !important;
}
</style>
<style>
.el-pagination.is-background .el-pager li:not(.disabled) {
  background-color: #de7285;
  color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #de7285;
  color: black;
}

</style>